<template>
  <div style="display:flex">
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="onRemove"
    >
      <i class="el-icon-plus" />
      <span>上传</span>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <!-- <img width="100%" :src="dialogImageUrl" alt=""> -->
    </el-dialog>
  </div>
</template>

<script>
import { uploadPic } from '@/api/service'
export default {
  name: 'SeeImgIndex',
  // inject: ['imageList'],
  props: {
    seeimage2: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      fileList: this.seeimage2,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  watch: {
    seeimage2: {
      deep: true,
      handler: function(newV, oldV) {
        console.log(newV)
        this.fileList = newV
      }
    }
  },
  methods: {
    onRemove(result) {
      console.log(result)
      const pic = result.url.substring(26)
      this.fileList = this.fileList.filter(item => result.url !== item.url)
      // console.log(this.fileList)
      // console.log(pic)
      this.$emit('removeUrl', pic)
    },
    async httpRequest(file) {
      const fd = new FormData()
      fd.append('file', file.file)
      // console.log(this.fileList)
      const res = await uploadPic(fd)
      this.fileList.push({ url: `http://124.223.14.236:8881${res.data.data.url}` })
      this.$emit('pushImage', res.data.data.url)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card{
  width: 110px;
  height: 110px;
}
::v-deep .el-upload--picture-card{
  position: relative;
}
::v-deep .el-icon-plus{
  position: absolute;
  left: 37%;
  top: 20%;
}
::v-deep .el-upload-list__item-thumbnail{
  width: 110px;
  height: 110px;
}
::v-deep .el-upload-list__item{
  width: 110px;
  height: 110px;
}
</style>
